<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			body{
				background-repeat: no-repeat;
				/*background-color: #FFE53B;*/ background-image: linear-gradient(147deg,#FFE53B 0%,#FF2525 74%); background-image: -webkit-linear-gradient(147deg,#FFE53B 0%,#FF2525 74%); background-image: -moz-linear-gradient(147deg,#FFE53B 0%,#FF2525 74%); background-image: -o-linear-gradient(147deg,#FFE53B 0%,#FF2525 74%);
			}
		</style>
	</head>

	<body>

		<h2>模态框（Modal）插件事件</h2>
		<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
				</button>
						<h4 class="modal-title" id="myModalLabel">
					模态框（Modal）标题
				</h4>
					</div>
					<div class="modal-body">
						点击关闭按钮检查事件功能。
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">
					关闭
				</button>
						<button type="button" class="btn btn-primary">
					提交更改
				</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		<script>
			$(function() {
				$('#myModal').modal('hide')
			});
		</script>
		<script>
			$(function() {
				$('#myModal').on('hide.bs.modal', function() {
					console.log("关闭了模态窗");
				})
				$('#myModal').on('show.bs.modal', function() {
					console.log("打开了模态窗");
				})
			});
		</script>

	</body>

</html>